<template>
  <!-- 工程管理页面 -->
  <div>
    <el-row class="container">
      <upper-template
        @search="searchFunc"
        @clear="(searchForm.moduleCode = ''), (searchForm.projectName = '')"
      >
        <div slot="buttonArea">
          <el-button @click="addFunc">新增</el-button>
          <el-button @click="editFunc">编辑</el-button>
          <el-button @click="delFunc">删除</el-button>
          <el-button @click="lockFunc('1')">锁定</el-button>
          <el-button @click="lockFunc('2')">解锁</el-button>
          <el-button @click="appMag()">应用管理</el-button>
          <el-button @click="dataSrcMag()">数据源管理</el-button>
        </div>
        <div slot="searchArea">
          <el-form
            :model="searchForm"
            ref="searchForm"
            label-width="100px"
            label-position="left"
            size="mini"
          >
            <el-form-item label="工程名称：">
              <el-input v-model="searchForm.projectName"></el-input>
            </el-form-item>
            <el-form-item label="系统字典：">
              <el-input v-model="searchForm.moduleCode"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="columnHide">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="item in textData"
              :label="item.label"
              :key="item.prop"
              >{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </upper-template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @row-click="authorizeFor"
      >
        <el-table-column
          width="55"
          type="selection"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="projectId"
          label="工程号"
          align="center"
          v-if="tablePick[0]"
        >
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="工程名称"
          align="center"
          sortable
          v-if="tablePick[1]"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          sortable
          v-if="tablePick[2]"
        >
        </el-table-column>

        <el-table-column
          prop="moduleName"
          label="授权应用"
          sortable
          v-if="tablePick[3]"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="锁定状态"
          sortable
          v-if="tablePick[4]"
        >
        </el-table-column>
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-size="15"
        :total="400"
      ></pagination>
    </el-row>
    <!-- 新增和编辑弹窗 -->
    <el-dialog
      v-dialogDrag
      :title="saveTitles[saveFlg - 1]"
      :visible.sync="addOrEdit"
      top="2%"
    >
      <el-form
        :model="saveForm"
        ref="addTreeForm"
        label-width="150px"
        label-position="right"
        :rules="saveFormRules"
      >
        <el-form-item label="工程号：" prop="projectId">
          <el-input v-model="saveForm.projectId" maxlength="40"></el-input>
        </el-form-item>
        <el-form-item label="工程名：" prop="projectName">
          <el-input v-model="saveForm.projectName" maxlength="40"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            type="textarea"
            v-model="saveForm.remark"
            maxlength="255"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrEdit = false">确 定</el-button>
        <el-button @click="addOrEdit = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 同步模块数据窗口 -->
    <el-dialog
      v-dialogDrag
      title="应用管理"
      :visible.sync="isAppMag"
      width="514px"
    >
      <el-form
        :model="appMagForm"
        ref="appMagForm"
        label-width="100px"
        label-position="left"
      >
        <el-row>
          <el-col :span="18" :offset="4">
            <el-form-item label="工程名：" prop="projectName">
              <el-select v-model="appMagForm.moduleName" placeholder="请选择">
                <el-option
                  v-for="item in mgrRoleIdList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18" :offset="4">
            <el-form-item label="应用模块：" prop="dbUsername">
              <el-select v-model="appMagForm.moduleName" placeholder="请选择">
                <el-option
                  v-for="item in mgrRoleIdList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18" :offset="4">
            <el-form-item label="数据源：" prop="dbPassword">
              <el-select v-model="appMagForm.moduleName" placeholder="请选择">
                <el-option
                  v-for="item in mgrRoleIdList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isAppMag = false">确 定</el-button>
        <el-button @click="isAppMag = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 工程表配置 -->
    <el-dialog
      v-dialogDrag
      title="数据源管理"
      :visible.sync="isDataSrcMag"
      top="2%"
      width="60%"
    >
      <el-row>
        <el-col :span="24">
          <upper-template @search="searchFunc_data" :configIcon="false">
            <div slot="buttonArea">
              <el-button @click="sync_dataSrc">同步数据源</el-button>
              <el-button @click="addFunc_data">新增</el-button>
              <el-button @click="editFunc_data">修改</el-button>
              <el-button @click="delFunc_data">删除</el-button>
            </div>
            <div slot="searchArea">
              <el-form
                :model="searchFF"
                ref="searchFF"
                label-width="100px"
                label-position="left"
                size="mini"
              >
                <el-form-item label="数据源名称：">
                  <el-input v-model="searchFF.datasource"></el-input>
                </el-form-item>
                <el-form-item label="应用模块：">
                  <el-input v-model="searchFF.moduleCode"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </upper-template>
          <el-table
            ref="dataSrcTable"
            :data="dataSrcTableData"
            style="width: 100%"
          >
            <el-table-column
              width="55"
              type="selection"
              fixed="left"
            ></el-table-column>
            <el-table-column prop="datasource" label="数据源名称">
            </el-table-column>
            <el-table-column prop="moduleCode" label="应用模块">
            </el-table-column>
            <el-table-column prop="url" label="路径 "> </el-table-column>
            <el-table-column prop="username" label="用户" sortable>
            </el-table-column>
            <el-table-column prop="mysql" label="数据库驱动" sortable>
            </el-table-column>
          </el-table>
          <pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-size="10"
            :total="400"
          ></pagination>
        </el-col>
      </el-row>

      <el-dialog
        :title="saveFlg_data == 1 ? '新增数据源' : '修改数据源'"
        append-to-body
        :visible.sync="isDataSrcMagAddOrEdit"
        width="514px"
      >
        <el-form
          :model="saveForm_data"
          ref="saveForm_data"
          label-width="120px"
          label-position="left"
          size="mini"
        >
          <h2 style="height: 20px"><span class="vertical-bar" />基础参数</h2>
          <el-form-item label="数据源名称：">
            <el-input v-model="saveForm_data.datasource"></el-input>
          </el-form-item>
          <el-form-item label="应用模块：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="url：">
            <el-input v-model="saveForm_data.url"></el-input>
          </el-form-item>
          <el-form-item label="username：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="password：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="数据库驱动：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <h2 style="height: 20px">
            <span class="vertical-bar"></span> 其他参数
          </h2>
          <el-form-item label="初始线程数：">
            <el-input v-model="saveForm_data.datasource"></el-input>
          </el-form-item>
          <el-form-item label="最大线程数：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="最小空闲数：">
            <el-input v-model="saveForm_data.url"></el-input>
          </el-form-item>
          <el-form-item label="最大空闲数：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="最大等待时间：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="重新检测时间：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
          <el-form-item label="最小生存时间：">
            <el-input v-model="saveForm_data.moduleCode"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="saveFunc_data">确定</el-button>
          <el-button @click="isDataSrcMagAddOrEdit = false">取消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { publicManage } from "@/api/index";
import UpperTemplate from "../../components/upperTemplate.vue";

export default {
  data() {
    return {
      userDo: "授权角色", // 右侧用户行为
      userDoFlag: 0,
      addOrEdit: false, // 新增/编辑/查看弹窗
      isAppMag: false, //同步模块数据弹窗
      serachMore: false,
      isDataSrcMag: false, //工程表配置弹窗
      isDataSrcMagAddOrEdit: false,
      saveFlg: 1, // 1:新增，2：编辑，3查看,
      saveFlg_data: 1,
      saveTitles: ["添加工程信息", "编辑工程信息"],
      appMagForm: {},
      // 角色管理下拉框
      mgrRoleIdList: [
        {
          value: "选项1",
          label: "模块1",
        },
        {
          value: "选项2",
          label: "模块2",
        },
      ],
      searchForm: {
        projectName: "",
        moduleCode: "",
        page: 1,
        size: 10,
      },
      searchFF: {
        datasource: "",
        moduleCode: "",
      },
      saveForm: {
        operateType: "2",
        userId: "",
        userName: "",
        realName: "",
        password: "",
        passwordStr: "",
        orgId: "",
        orgId_text: "",
        useFlag: "",
        empNo: "",
        idcard: "",
        officePhone: "",
        mobilePhone: "",
        famliyPhone: "",
        email: "",
      },
      saveForm_data: {},
      saveFormRules: {
        userName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
        ],
        password: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { min: 6, max: 8, message: "密码长度在6-8之间", trigger: "blur" },
          // { validator: this.validPassword, trigger: "blur" },
        ],
        passwordStr: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.validPassword, trigger: "blur" },
        ],
        orgId: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
        ],
        status: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
        ],
      },
      checkList: [],
      // 完整表头字段&&列属性配置
      textData: [
        { prop: "projectId", label: "工程号" },
        { prop: "projectName", label: "工程名称" },
        { prop: "remark", label: "备注" },
        { prop: "moduleName", label: "授权应用" },
        { prop: "status", label: "锁定状态" },
      ],
      // 获取table的数据
      tableData: [
        {
          projectId: "PROJ000006",
          projectName: "PROJ000005",
          moduleCode: null,
          moduleName: "资产负债",
          dbUsername: "ALM_ENGINE",
          status: "1",
          useFlag: "0",
        },
      ],
      dataSrcTableData: [
        {
          tableCode: "EDM_COMMON_PARAM",
          tableName: "公共参数表",
          tableDesc: "公共参数表",
          moduleCode: "PUB",
          initFlag: "0",
          tableCodeValue: "EDM_COMMON_PARAM",
        },
        {
          tableCode: "EDM_COMMON_PARAM_VALUE",
          tableName: "公共参数值表",
          tableDesc: "公共参数值表",
          moduleCode: "PUB",
          initFlag: "0",
          tableCodeValue: "EDM_COMMON_PARAM_VALUE",
        },
        {
          tableCode: "EDM_DS_ATTACHMENT",
          tableName: "数据接口需求-附件信息表",
          tableDesc: "数据接口需求-附件信息表",
          moduleCode: "DI",
          initFlag: "0",
          tableCodeValue: "EDM_DS_ATTACHMENT",
        },
        {
          tableCode: "EDM_DS_BASE_STANDARD_LIBRARY",
          tableName: "标准基词库",
          tableDesc: "标准基词库",
          moduleCode: "DS",
          initFlag: "0",
          tableCodeValue: "EDM_DS_BASE_STANDARD_LIBRARY",
        },
        {
          tableCode: "EDM_DS_CLASSIFY_INFO",
          tableName: "字段标准分类信息",
          tableDesc: "字段标准分类信息",
          moduleCode: "DS",
          initFlag: "0",
          tableCodeValue: "EDM_DS_CLASSIFY_INFO",
        },
        {
          tableCode: "EDM_DS_COLUMN_STANDARD",
          tableName: "字段标准详细信息",
          tableDesc: "字段标准详细信息",
          moduleCode: "DS",
          initFlag: "0",
          tableCodeValue: "EDM_DS_COLUMN_STANDARD",
        },
        {
          tableCode: "EDM_DS_COLUMN_STANDARD_TABLE",
          tableName: "表标准详细信息",
          tableDesc: "表标准详细信息",
          moduleCode: "DS",
          initFlag: "0",
          tableCodeValue: "EDM_DS_COLUMN_STANDARD_TABLE",
        },
        {
          tableCode: "EDM_COMMON_CODE",
          tableName: "码值参数表",
          tableDesc: "码值参数表",
          moduleCode: "DS",
          initFlag: "0",
          tableCodeValue: "EDM_COMMON_CODE",
        },
        {
          tableCode: "EDM_COMMON_CODE_VALUE",
          tableName: "码值参数值",
          tableDesc: "码值参数值",
          moduleCode: "DS",
          initFlag: "0",
          tableCodeValue: "EDM_COMMON_CODE_VALUE",
        },
        {
          tableCode: "EDM_DI_COLLECT",
          tableName: "数据接口采集信息",
          tableDesc: "数据接口采集信息",
          moduleCode: "DI",
          initFlag: "0",
          tableCodeValue: "EDM_DI_COLLECT",
        },
      ],
    };
  },
  created() {
    this.checkListInit();
    console.log(this.tableData, "模拟数据");
  },
  computed: {
    tablePick() {
      return this.$tableDataPick(this.checkList, this.textData);
    },
  },
  mounted() {
    // this.getList();
  },
  watch: {},
  methods: {
    // 两个密码校验
    validPassword(rule, value, callback) {
      if (this.saveForm.password === this.saveForm.passwordStr) {
        callback();
      } else {
        callback(new Error("两次输入密码不一致"));
      }
    },
    checkListInit() {
      this.checkList = this.textData.map((v) => {
        return v.label;
      });
    },
    searchFunc() {},
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("你确定要删除选中数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    lockFunc(data) {
      let val = data == "1" ? "锁定" : "解锁";
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要" + val + "的工程");
      }
      this.$confirm(`你确定要${val}所选工程吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (val == "锁定") {
          } else {
          }
          this.$message.success(val + "成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + val,
          });
        });
    },
    getList() {
      publicManage.query("我的参数").then((res) => {
        console.log(res);
      });
    },
    // 点击表格右侧显示为xx授权
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },
    appMag() {
      this.isAppMag = true;
    },
    dataSrcMag() {
      this.isDataSrcMag = true;
    },
    //    数据源管理 ↓
    searchFunc_data() {},
    sync_dataSrc() {},
    addFunc_data() {
      this.saveFlg_data = 1;
      this.isDataSrcMagAddOrEdit = true;
    },
    editFunc_data() {
      this.saveFlg_data = 2;
      let slec = this.$refs["dataSrcTable"].selection;
      if (slec.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      } else {
        this.isDataSrcMagAddOrEdit = true;
      }
    },
    saveFunc_data() {},
    delFunc_data() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
</style>